//=================================TOOLS=============================
//工具对象
(function () {
    var Tools={
        getRandom:function (min,max) {
            return Math.floor(Math.random()*(max-min+1))+min;
        }
    };
    window.Tools=Tools;
})()
//==============================Food==============================
;(function () {
    var position='absolute';
    var elements=[];
    function Food(options){
        options=options||{};
        this.x=options.x||0;
        this.y=options.y||0;
        this.width=options.width||20;
        this.height=options.height||20;
        this.backgroundColor=options.backgroundColor||'green';


    }
//渲染
    Food.prototype.render=function (map) {
//删除食物
        remove();

        // console.log(map.offsetWidth);//map.width  拿不到
        this.x=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width;
        this.y=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height;
        // console.log(this.x);
        // console.log(this.y);

        var div=document.createElement('div');
        div.style.left=this.x+'px';
        div.style.top=this.y+'px';
        div.style.width=this.width+'px';
        div.style.height=this.height+'px';
        div.style.backgroundColor=this.backgroundColor;
        div.style.position=position;
        map.appendChild(div);
        //删除食物

        elements.push(div);
        function remove(){
            for(var i=elements.length-1;i>=0;i--){
                elements[i].parentNode.removeChild(elements[i]);
                elements.splice(i,1);
            }
        }

    };
    window.Food=Food;
})()
//==================================Snake===============================
;(function () {
    var  position='absolute';
    var elements=[];
    function Snake(options) {
        options=options||{};
        this.width=options.width||20;
        this.height=options.height||20;
        this.direction=options.direction||'right';
        this.body=[
            {x:3,y:2,color:'red'},
            {x:2,y:2,color:'blue'},
            {x:1,y:2,color:'blue'}
        ];
    }

    Snake.prototype.render=function (map) {
        //删除之前的
        remove();



        for(var i=0,len=this.body.length;i<len;i++){
            var obj=this.body[i];
            var div=document.createElement('div');
            elements.push(div);
            map.appendChild(div);
            div.style.width=this.width+'px';
            div.style.height=this.height+'px';
            div.style.backgroundColor=this.body[i].color;
            div.style.position=position;
            div.style.left=this.body[i].x*this.width+'px';
            div.style.top=this.body[i].y*this.height+'px';
        }
        function remove() {
            for(var i=elements.length-1;i>=0;i--){

                elements[i].parentNode.removeChild(elements[i]);

                elements.splice(i,1);

            }
        }
    };

    Snake.prototype.move=function (food,map) {

        //移动身体
        for(var i=this.body.length-1;i>0;i--){
            this.body[i].x=this.body[i-1].x;
            this.body[i].y=this.body[i-1].y;
        }

        //移动头
        var head=this.body[0];
        switch (this.direction){
            case 'right' :  this.body[i].x+=1;break;
            case 'left':    this.body[i].x-=1;break;
            case 'top':     this.body[i].y-=1;break;
            case 'bottom' : this.body[i].y+=1;break;
        }


//吃食物
        var headX=head.x*this.width;
        var headY=head.y*this.height;
        if(food.x===headX&&food.y===headY){
            var last=this.body[this.body.length-1];
            console.log(last);
            this.body.push({
                x:last.x,
                y:last.y,
                color:last.color
            });
            food.render(map);
        }

    };
    window.Snake=Snake;
})()
//=============================================Game=============================
;(function () {
    var that=null;
    function Game(map) {
        this.food=new Food();
        this.snake=new Snake();
        this.map=map;
        that=this;
    }
    Game.prototype.start=function () {
        this.food.render(this.map);
        this.snake.render(this.map);
        runSnake();

        function runSnake() {
            var headX;
            var maxX;
            var maxY;
            var headY;
            var timeId=setInterval(function (args) {
                that.snake.move(that.food,that.map);
                that.snake.render(that.map);

                headX=that.snake.body[0].x;
                maxX =that.map.offsetWidth/that.snake.width;
                maxY =that.map.offsetHeight/that.snake.height;
                headY=that.snake.body[0].y;


                if(headX<0||headX>=maxX){
                    alert('low');
                    clearInterval(timeId);
                }
                if(headY<0||headY>=maxY){
                    alert('low');
                    clearInterval(timeId);
                }
                // console.log(headX,headY,maxX,maxY);
            },100);
        }
        document.addEventListener('keydown',function (ev) {
            switch(ev.keyCode){
                case 37:that.snake.direction='left';break;
                case 38:that.snake.direction='top';break;
                case 39:that.snake.direction='right';break;
                case 40:that.snake.direction='bottom';break;
            }
        },false)
        // this.snake.move();
        // this.snake.render(this.map);
        // this.snake.move();
        // this.snake.render(this.map);
        // this.snake.move();
        // this.snake.render(this.map);

    };
    window.Game=Game;
})()
//==========================调用============================
;(function () {
    var map=document.getElementsByClassName('map')[0];
    var game=new Game(map);
    game.start();
})();